<!--
  富文本编辑器html代码结果“原样”展示
  编辑器编辑状态跟最终得到的结果样式不一致，需要嵌入跟编辑器一致的外层容器，并且引入编辑器样式才能保持一致性
-->
<template>
  <div
    class="ql-container ql-snow vue-editor-html"
    :style="['extraStyleObj', 'styleObj']"
  >
    <div
      ref="qlEditor"
      class="ql-editor"
      :style="contBoxStyle"
      v-html="xssValueFilter(content)"
    ></div>
  </div>
</template>
<script>
import { xssValueFilter } from '@/utils/util';

export default {
  components: {},
  props: {
    html: String,
    extraConfig: {
      type: Object,
      default() {
        return {};
      },
    },
    componentStyle: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      content: this.html,
      extraStyleObj: {},
      styleObj: {},
      contBoxStyle: {},
    };
  },
  computed: {},
  watch: {
    html(val) {
      this.content = val;
    },
    extraConfig: {
      handler: function(val) {
        this.setStyleObj(val);
        this.setContBoxStyle(val);
      },
      deep: true,
    },
    componentStyle: {
      handler: function(val) {
        this.setTooltipBackground(val);
      },
    },
  },
  methods: {
    xssValueFilter,
    setStyleObj(val) {
      this.extraStyleObj = {};
      const { paddingTop = 0, paddingBottom = 0, paddingLeft = 0, paddingRight = 0 } = val;
      let vWidth = 0;
      let vHeight = 0;
      vWidth = paddingLeft + paddingRight;
      vHeight = paddingTop + paddingBottom;
      if (vWidth) {
        this.extraStyleObj['width'] = `calc(100% - ${vWidth}px)`;
      }
      if (vHeight) {
        this.extraStyleObj['height'] = `calc(100% - ${vHeight}px)`;
      }
    },
    setContBoxStyle(val) {
      const { showScrollBar = false } = val;
      if (!showScrollBar) {
        this.contBoxStyle = {
          overflow: 'hidden',
        };
      } else {
        this.contBoxStyle = {};
      }
    },
    setTooltipBackground(val) {
      this.styleObj = {};
      if (val === 'light') {
        this.styleObj = {
          background: 'rgba(34, 34, 34, 0.7)',
          borderColor: 'rgba(51, 51, 51)',
        };
      } else if (val === 'dark') {
        this.styleObj = {
          background: 'rgba(53, 83, 107, 0.7)',
          borderColor: 'rgba(51, 51, 51)',
        };
      } else {}
    },
  },
};
</script>

<style lang="css">
@import './css/quill.snow.css';
@import './css/quill.additionalFonts.css';
</style>
<style lang="less" scoped>
.ql-container {
  &.ql-snow {
    border: none;
  }
  .ql-editor {
    padding: 0;
  }
}
.ql-editor {
  min-height: 10px;
  font-size: 16px;
}
</style>
